import React, { Component, Fragment } from "react";
import { Form, Icon, Button } from "antd";
import styles from "./ChainInputBox.less";

class ChainInputBox extends Component {
  state = {
    value: []
  };

  static getDerivedStateFromProps(nextProps) {
    if ("value" in nextProps) {
      return {
        value: nextProps.value
      };
    }
    return null;
  }

  render() {
    const { field, onChange, max } = this.props;
    const { value } = this.state;
    return (
      <div className={styles.boxRoot}>
        {!(value || []).length && (
          <ChainInput
            field={field}
            onChange={allValues => {
              const temp = JSON.parse(JSON.stringify(value || []));
              temp[0] = allValues;
              onChange(temp);
            }}
          />
        )}
        {(value || []).map((item, index) => (
          <div key={index} className={styles.ChainInput}>
            <ChainInput
              field={field}
              value={item}
              onChange={allValues => {
                const temp = JSON.parse(JSON.stringify(value || []));
                temp[index] = allValues;
                onChange(temp);
              }}
            />
            <Icon
              type="close"
              className={styles.closeButton}
              onClick={() => {
                const temp = JSON.parse(JSON.stringify(value || []));
                temp.splice(index, 1);
                onChange(temp);
              }}
            />
          </div>
        ))}
        <Button
          shape="circle"
          icon="plus"
          size="small"
          className={styles.addButton}
          disabled={max ? (value || []).length >= max : false}
          onClick={() => {
            const temp = JSON.parse(JSON.stringify(value || []));
            temp.push({});
            onChange(temp);
          }}
        />
      </div>
    );
  }
}

export default ChainInputBox;

@Form.create({
  onValuesChange: ({ onChange }, changedValues, allValues) => {
    if (onChange) {
      onChange(allValues);
    }
  }
})
class ChainInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputsValue: props.value
    };
  }

  componentDidMount() {
    const {
      form: { setFieldsValue },
      value = {}
    } = this.props;
    setFieldsValue(value);
  }

  static getDerivedStateFromProps(nextProps) {
    if ("value" in nextProps) {
      return {
        inputsValue: nextProps.value
      };
    }
    return null;
  }

  componentDidUpdate(prevProps, { inputsValue }) {
    if (
      JSON.stringify(inputsValue) !== JSON.stringify(this.state.inputsValue)
    ) {
      this.props.form.resetFields();
      this.props.form.setFieldsValue(this.state.inputsValue);
    }
  }

  render() {
    const {
      field,
      form: { getFieldDecorator }
    } = this.props;
    return (
      <div className={styles.inputRoot}>
        {Object.entries(field).map(([fieldName, ReactNode], index) => (
          <Fragment key={fieldName}>
            {!!index && (
              <span className={styles.dash}>&nbsp;&nbsp;——&nbsp;&nbsp;</span>
            )}
            {getFieldDecorator(fieldName, {
              initialValue: undefined
            })(ReactNode)}
          </Fragment>
        ))}
      </div>
    );
  }
}
